<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <link th:href="@{/css/Semantic-UI-CSS-master/semantic.css}" href="../static/css/Semantic-UI-CSS-master/semantic.css" rel="stylesheet" type="text/css">
  <link th:href="@{/css/main.css}" href="../static/css/main.css" rel="stylesheet" type="text/css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Title</title>
  <script th:src="@{/js/jquery-3.4.0.js}" src="../static/js/jquery-3.4.0.js" type="text/javascript"></script>
  <script th:src="@{/css/Semantic-UI-CSS-master/semantic.js}" src="../static/css/Semantic-UI-CSS-master/semantic.js" type="text/javascript"></script>
</head>
<body>
<nav class="ui inverted attached segment" id="nav">
  <div class="ui container">
    <div class="ui inverted secondary menu">
      <h2 class="ui teal header item">Blog</h2>
      <a href="/index" class="item"><i class="home icon"></i> 首页</a>
      <a href="/type" class="item"><i class="idea icon"></i> 分类</a>
      <a href="/tag" class="item active"><i class="tags icon"></i> 标签</a>
      <div class="center item" style="margin-left: 100px">
        <div class="ui input inverted icon transparent">
          <input type="text" placeholder="Search">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
</nav>

<div class="m-container-small m-padded-large">
  <div class="ui container">
    <div class="ui segment top attached">
      <div class="ui two column grid middle aligned">
        <div class="column">
          <h3 class="ui teal header">标签</h3>
        </div>
        <div class="column right aligned">
          共 <h2 class="ui orange header m-inline-block" th:text="${tagList.size()}">14</h2> 个
        </div>
      </div>
    </div>
    <div class="ui attached segment">
      <div class="ui labeled button m-margin-small" th:each="tag:${tagList}">
        <a th:href="|/tag?tagId=${tag.id}|" class="ui teal basic left pointing label"><span th:text="${tag.name}">方法论</span>
          <div class="detail"><span th:text="${tag.getBlogs().size()}">21</span></div>
        </a>
      </div>
    </div>
    <!--文章-->
    <div class="ui segment attached">
      <div class="ui segment vertical m-padded-large" th:each="blog:${blogPageInfo.getList()}">
        <div class="ui grid">
          <div class="eleven wide column">
            <h3 class="ui header" th:text="${blog.title}">Bootstrap 教程</h3>
            <p class="m-text-spaced" th:text="${blog.content}">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的...</p>
            <div class="ui grid">
              <div class="eleven wide column">
                <div class="ui horizontal link list">
                  <div class="item">
                    <img th:src="${blog.user.img}" src="img/brain.jpg" class="ui avatar image">
                    <div class="content"><a href="#" class="header" th:text="${blog.user.name}">梅迪乌斯</a></div>
                  </div>
                  <div class="item">
                    <i class="calendar icon"></i><span th:text="${blog.updateTime}">2021-01-01</span>
                  </div>
                </div>
              </div>
              <div class="right aligned five wide column">
                <a href="" class="ui teal basic label m-padded-mini" target="_blank" th:text="${blog.type.name}">认知升级</a>
              </div>
            </div>
          </div>
          <div class="five wide column">
            <a th:href="|/blog?blogId=${blog.id}|" target="_blank">
              <img th:src="${blog.picture}" src="../static/img/background.jpg" class="ui rounded image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--翻页-->
    <div class="ui bottom attached segment">
      <div class="ui grid middle aligned">
        <div class=" three wide column">
          <form action="/tag" method="get" th:if="${blogPageInfo.prePage>0}">
            <input type="hidden" name="tagId" th:value="${tagId}">
            <input type="hidden" name="pageNum" th:value="1">
            <button class="ui button mini teal basic item">
              首页
            </button>
          </form>
        </div>
        <div class=" three wide column">
          <form action="/tag" method="get" th:if="${blogPageInfo.prePage>0}">
            <input type="hidden" name="tagId" th:value="${tagId}">
            <input type="hidden" name="pageNum" th:value="${blogPageInfo.prePage}">
            <button class="ui button mini teal basic item">
              上一页
            </button>
          </form>
        </div>
        <div class=" four wide column" th:text="|第${blogPageInfo.pageNum}页/共${blogPageInfo.pages}页|">
          当前页/总页数
        </div>
        <div class=" three wide column">
          <form action="/tag" method="get" th:if="${blogPageInfo.nextPage}>1">
            <input type="hidden" name="tagId" th:value="${tagId}">
            <input type="hidden" name="pageNum" th:value="${blogPageInfo.nextPage}">
            <button class="ui button mini teal basic item">
              下一页
            </button>
          </form>
        </div>
        <div class=" three wide column">
          <form action="/tag" method="get" th:if="${blogPageInfo.pageNum}<${blogPageInfo.pages}">
            <input type="hidden" name="tagId" th:value="${tagId}">
            <input type="hidden" name="pageNum" th:value="${blogPageInfo.pages}">
            <button class="ui button mini teal basic item">
              尾页
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<footer class="ui segment vertical">
  <div class="ui center aligned container">
    <div class="ui section divider"></div>
    Copyright ©2019-2023 SimpleBook Designed by Harlaus
    <br>
    备案号：津ICP备20005778号-1公安备案号津公网安备 12011602000448 号
    </p>
  </div>
</footer>
<script>
  $('.ui.dropdown').dropdown({
    on : 'hover'
  });
  var qrcode = new QRCode("qrcode", {
    text: "D:\\Java\\MyBook\\src\\main\\resources\\static\\img\\WeChat.png",
    width: 100,
    height: 100,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
  });
</script>
</body>
</html>